<template>
  <div>
    <div>非响应式使用toRef:{{ a }}</div>
    <div>响应式使用toRef:{{ b }}</div>
    <div>toRefs:{{ name + "-" + age }}</div>
    <hr />
    <button @click="change">change</button>
  </div>
</template>

<script setup lang="ts">
import { toRef, reactive, toRefs, toRaw } from "vue";
/**
 * toref 只能修改响应式对象的值 非常响应式视图毫无变化
 * toRaw 能将响应式对象变为非响应式
 */
const a = { name: "xiaozhang", age: 18 };
const age1 = toRef(a, "age");
const b = reactive({ name: "ziyi", age: 20 });
const age2 = toRef(b, "age");

const change = () => {
  age1.value = 19;
  age2.value = 21;
  console.log(a, b);
};
const { name, age } = toRefs(b);
console.log(name, age);
</script>

<style lang="scss" scoped></style>
